<!--
 * @Author: zhusha 
 * @Date: 2025-04-16 09:27:45
 * @LastEditors: zhusha
 * @LastEditTime: 2025-05-14 15:21:28
 * @Description: 景点用瀑布流展示
 * 
 * Copyright (c) 2025 by zhusha, email: no email, All Rights Reserved. 
-->
<template>
    <view class="c-flow">
        <flowItem class="m-flow" :routesList="columns">
            <template #left="{ left }">
                <view v-for="item in left" class="mr-[10rpx] u-item" @click="goToDetail(item)">
                    <wd-img :src="item?.cover?.url" mode="widthFix" width="100%">
                        <template #error>
                            <view class="w-[100%]">
                                <image src="/src/static/mp-weixin/images/df-cover.jpg" mode="widthFix" />
                            </view>
                        </template>
                        <template #loading>
                            <view class="flex justify-center items-center w-[100%] min-h-[200rpx]">
                                <wd-loading />
                            </view>
                        </template>
                    </wd-img>
                    <view class="px-[10rpx] py-[10rpx]">
                        <view class="u-title text-[28rpx]">{{ item.spotName }}</view>
                        <view class="u-tag flex gap-1 py-2">
                            <wd-tag type="primary" mark v-for="tag in item?.spotTags || []" :key="item">{{
                                tag
                            }}</wd-tag>
                        </view>
                        <view class="text-right">
                            <wd-text
                                :text="`${item?.minPrice}起`"
                                size="14px"
                                bold
                                color="#E60720"
                                prefix="￥"
                            ></wd-text>
                        </view>
                    </view>
                </view>
            </template>
            <template #right="{ right }">
                <view v-for="item in right" class="ml-[10rpx] u-item" @click="goToDetail(item)">
                    <wd-img :src="item?.cover?.url" mode="widthFix" width="100%">
                        <template #error>
                            <view class="w-[100%]">
                                <image src="/src/static/mp-weixin/images/df-cover.jpg" mode="widthFix" />
                            </view>
                        </template>
                        <template #loading>
                            <view class="flex justify-center items-center w-[100%] min-h-[200rpx]">
                                <wd-loading />
                            </view>
                        </template>
                    </wd-img>
                    <view class="px-[10rpx] py-[10rpx]">
                        <view class="u-title text-[28rpx]">{{ item.spotName }}</view>
                        <view class="u-tag flex gap-1 py-2">
                            <wd-tag type="primary" mark v-for="tag in item?.spotTags || []" :key="item">{{
                                tag
                            }}</wd-tag>
                        </view>
                        <view class="text-right">
                            <wd-text
                                :text="`${item?.minPrice}起`"
                                size="14px"
                                bold
                                color="#E60720"
                                prefix="￥"
                            ></wd-text>
                        </view>
                    </view>
                </view>
            </template>
        </flowItem>
    </view>
</template>

<script lang="ts" setup>
import flowItem from "./flowItem.vue";
defineProps({
    columns: {
        type: Array,
        default: () => [],
    },
});
const emits = defineEmits(["goToDetail"]);
const goToDetail = (item: any) => {
    uni.navigateTo({ url: `/pages/scenicSpot/detail?spotId=${item?.id}` });
    emits("goToDetail", item);
};
</script>

<style lang="scss" scoped>
.c-flow {
    width: 100%;
    .u-item {
        margin-bottom: 40rpx;
        overflow: hidden;
        background-color: #ecf8ff;
        border-radius: 10rpx;
        box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.1);

        .u-title {
            display: -webkit-box;
            overflow: hidden;
            color: #666;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }
}
</style>
